<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/resources/layout/common-layout.xhtml">

    <ui:define name="menuLeft">
        <!--ui:include src="/sections/home/menuLeft.xhtml"/-->
    </ui:define>
    <ui:define name="content">
        <h:form id="h2" prependId="false">
            <p:growl id="growl" showDetail="true" showSummary="true" globalOnly="true"/>
            <ui:decorate template="resources/widget/searchFormDecorator.xhtml">
                <h:panelGrid columns="2" columnClasses="width50pc,width50pc">
                <p:autoComplete
                    id="search"
                    widgetVar="searchVar"
                    value="#{indexController.search}"
                    styleClass="search width100pc"
                    completeMethod="#{indexController.onSuggest}">
                    <p:ajax event="itemSelect" listener="#{indexController.onSuggestSelect}" update="growl grid" />
                </p:autoComplete>
                <p:commandButton
                    id="button"
                    widgetVar="searchButton"
                    actionListener="#{indexController.onSearch}"
                    styleClass="search"
                    ajax="true"
                    update="grid"
                    value="Search"
                    title="Search"/>
                </h:panelGrid>
            </ui:decorate>
            <p:dataGrid
                id="grid" var="result"
                value="#{indexController.searchResult.results}"
                binding="#{indexController.grid}"
                columns="4" rows="20"
                paginator="true" effect="true"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="20,40,60,80,100">
                <p:column>
                    <p:panel header="#{result.name.fullName}" style="text-align:left">
                        <h:panelGrid columns="1" style="width:100%">
                            <h:graphicImage library="images" name="user-profile-83x74.png" />
                            <h:outputText value="#{result.birthDate}" />
                            <p:commandLink update="contactDialog" oncomplete="contactDialogVar.show()" title="View Contact" ajax="true">
                                <p:graphicImage value="/resources/images/disk.png"/>
                                <f:setPropertyActionListener value="#{result}" target="#{indexController.selected}" />
                            </p:commandLink>
                        </h:panelGrid>
                    </p:panel>
                </p:column>
            </p:dataGrid>
        </h:form>
        <h:form id="h1" prependId="false">
            <p:dialog id="contactDialog" widgetVar="contactDialogVar" header="Contact information">
                <h:panelGrid columns="2">
                    <h:outputLabel id="l01" for="i01" value="Name:" />
                    <p:inputText id="i01" value="#{indexController.selected.name.firstName}" />
                    <h:outputLabel id="l02" for="i02" value="Surname:" />
                    <p:inputText id="i02" value="#{indexController.selected.name.lastName}" />
                    <h:outputLabel id="l03" for="i03" value="Birth date:" />
                    <p:calendar id="i03" value="#{indexController.selected.birthDate}" pattern="yyyy-MM-dd" />

                </h:panelGrid>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>